<template>
  <div class="comment">
    <div class="avatar">
      <!-- 点击头像回复评论,将本条评论的数据传给父组件 -->
      <img
        @click="replayCom(item)"
        :src="baseURL + item.author.avatar"
        alt=""
      />
    </div>
    <div class="txt">
      <div class="user">
        <div class="left">
          <div class="name">{{ item.author.nickname }}</div>
          <div class="time">{{ item.created_at | getTime }}</div>
        </div>
        <div class="right">
          {{ item.star }}
          <!-- 用户点赞过这条评论，这条评论后面的👍就是红色，否则就是灰色 -->
          <i
            :class="{
              iconbtn_dianzan_small_sel: getStatus(item.id, 'starComments'),
              iconbtn_dianzan_small_nor: !getStatus(item.id, 'starComments')
            }"
            class="iconfont"
            @click="starCom"
          ></i>
        </div>
      </div>
      <div class="com">
        <div class="top">{{ item.content }}</div>
        <!-- 当当前评论有回复的时候才渲染bottom -->
        <div class="bottom" v-if="item.children_comments.length > 0">
          <div
            class="word"
            v-for="(itemChild, index) in item.children_comments"
            :key="index"
          >
            <span>{{ itemChild.author }}：</span>{{ itemChild.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 导入vuex的辅助函数
import { mapState, mapGetters } from 'vuex'
// 导入网络请求
import { starComApi } from '../../../../api/find.js'
export default {
  name: 'comment',
  props: {
    //   接收父组件传递的参数
    item: {
      type: Object
    }
  },
  data () {
    return {
      baseURL: process.env.VUE_APP_BASEURL
    }
  },
  computed: {
    // 获取vuex中的用户信息
    ...mapState(['userInfo']),
    ...mapGetters(['getStatus'])
  },
  methods: {
    // 点击头像回复评论
    replayCom (comDetail) {
      // 将方法传给父组件并将本条评论的数据传给父组件，让父组件来实现
      this.$emit('clickAva', comDetail)
    },
    // 点赞评论&取消点赞
    async starCom () {
      // 操作之前先验证用户是否登录
      if (!this.$login()) {
        // 未登录就终止代码的执行
        return
      }
      // 登录就执行下面代码
      // 1.根据被点击的评论的id发送点赞评论&取消点赞的请求
      const res = await starComApi(this.item.id)
      // 2.更新被点击的评论的被点赞个数
      this.item.star = res.data.num
      // 3.更新vuex中的用户信息（更新用户点赞的评论列表）
      this.$store.dispatch('setUserInfoAsync')
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  .iconbtn_dianzan_small_sel {
    color: #e40137;
  }
  display: flex;
  font-size: 12px;
  padding: 15px 0;
  .avatar {
    width: 45px;
    img {
      height: 35px;
      width: 35px;
      border-radius: 50%;
    }
  }
  .txt {
    flex: 1;
    .user {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
        .name {
          color: #545671;
          font-weight: 600;
        }
        .time {
          color: #b4b4bd;
          margin-top: 4px;
        }
      }
      .right {
        color: #b4b4bd;
        .iconfont {
          font-size: 22px;
          vertical-align: middle;
        }
      }
    }
    .com {
      // 特殊字符和英文自动换行
      word-break: break-all;
      word-wrap: break-word;
      .top {
        font-size: 16px;
        padding: 15px 0;
      }
      .bottom {
        background-color: #f7f4f5;
        padding: 0 15px 15px;
        border-radius: 4px;
        .word {
          color: #545671;
          padding-top: 15px;
          span {
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
